<template>
  <w-log :remove-url="removeUrl" :list-url="listUrl" :options="searchOptions">
    <template v-slot="scope" class="cell">
      <a-row :gutter="16">
        <a-col span="8">默认标识: {{ scope.item.defaultTag }}</a-col>
        <a-col span="8">用户名: {{ scope.item.userName }}</a-col>
        <a-col span="8">时间: {{ scope.item.date | DateFormat }}</a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col span="8">URL: {{ scope.item.routerPath }}</a-col>
        <a-col span="8" class="w-text-warp">Query: {{ scope.item.routerQuery }}</a-col>
        <a-col span="8" class="w-text-warp">
          Params: {{ scope.item.routerParams }}
        </a-col>
      </a-row>
      <div>平台: {{ scope.item.userAgent }}</div>
    </template>
  </w-log>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WLog from '@/components/admin/logs'
import { Admin } from '@/config/api'

@Component({
  name: 'AdminLogsWebProcess',
  layout: 'admin',
  components: {
    WLog
  },
  head () {
    return {
      title: '日志-前端-流程'
    }
  }
})
export default class AdminLogsWebProcess extends Vue {
  listUrl = Admin.logs.web.processList
  removeUrl = Admin.logs.web.processDelete
  searchOptions = [
    {
      title: '默认标识',
      key: 'defaultTag'
    },
    {
      title: '用户名',
      key: 'userName'
    },
    {
      title: '页面路由',
      key: 'routerPath'
    },
    {
      title: '设备型号',
      key: 'userAgent'
    }
  ]
}
</script>

<style scoped></style>
